﻿<!DOCTYPE html>
<html>
<head>
  <title>registered</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <style>
    body{
      display: flex;
      justify-content: center;
      background-color: rgb(21,148,197);

    }

    .div{
      width: 100%;
      height: 800px;
      margin-top: 2%;
      background: url("images/哆啦A梦.jpg") center center no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    input{
      width: 100%;
      height: 37px;
      border: 0px none;
      align-items: center;
    }
    tr{
      height: 30px;
    }
    .username{
      display: flex;
      flex-direction: row;
      background-color: white;
      width: 290px;
      border: 1px solid #808080;
    }
    a{
      color: white;
    }
    .border{
      display: flex;
      width: 600px;
      height: 500px;
      border: 8px solid white;
      border-radius: 25px;
    }
  </style>
</head>
<body>
<div class="div">
  <form action="registered">
    <div style="display: flex; justify-content: center;">
      <a style="color:white; font-size: 35px; ">注册</a>
    </div>
    <div class="border">
      <table >
        <td  width="150px" align="center" ><a>用户名</a></td>
        <td>
          <div class="username">
            <span><img src="images/login/u9.png" alt="" width="40" height="40px"></span>
            <input type="text" id="user" name="username">
          </div>
        </td>
        <td><span id="sp1"></span></td>
        </tr>

        <tr>
          <td  width="150px" align="center"><a>密码</a></td>
          <td>
            <div class="username">
              <span><img src="images/login/u10.png" alt="" width="40" height="40px"></span>
              <input type="text" id="pwd" name="password">
            </div>
          </td>

          <td><span id="sp2"></span></td>
        </tr>
        <tr>
          <td  width="150px" align="center"><a>确认密码</a></td>
          <td>
            <div  class="username">
              <span><img src="images/login/u10.png" alt="" width="40" height="40px"></span>
              <input type="text" id="pwdOk" name="passwordOk">
            </div>
          </td>


          <td><span id="sp3"></span></td>
        </tr>
        <tr>
          <td align="right">
            <input type="submit" id="re" value="点击注册" style="width: 65px;height: 35px;  color: rgb(21,148,197); margin-left: 150px;">
          </td>
          <td>
            <input type="submit" id="not" value="取消" style="width: 65px;height: 35px;background-color: #0f59a8; color: white; margin-left: 100px;">
          </td>
        </tr>
        <tr class=>
          <td><span id="sp4"></span></td>
          <td><span id="sp5"></span></td>
        </tr>
      </table>
    </div>
  </form>

</div>
<script src="resources/scripts/jquery-3.2.1.min.js"></script>
<script>
  //判断用户名是否为空
  var falg=false;
  var falg1=false;
  var falg2=false;
  $("#re").attr("disabled",true);
  $("#user").blur(function () {
    var username = $("#user").val();

    if (username==null||$.trim(username)==""){
      $("#sp1").html("用户名不能为空").css("color","red");
    }else{
      $("#sp1").html("用户名输入正确").css("color","green");
      falg=true;
    }
    btncheck()
  })
  //----------------------------------------------------
  //判断密码是否为空
  $("#pwd").blur(function () {
    var password = $("#pwd").val();

    if (password==null||$.trim(password)==""){
      $("#sp2").html("密码不能为空").css("color","red");
    }else{
      $("#sp2").html("密码输入完成").css("color","green");
      falg1=true;
    }
    btncheck()
  })

  //------------------------------------------------------
  //判断确认密码是否为空
  $("#pwdOk").blur(function () {
    var passwordOk = $("#pwdOk").val();
    if (passwordOk==null||$.trim(passwordOk)==""){
      $("#sp3").html("密码不能为空").css("color","red");
    }else{
      $("#sp3").html("密码输入完成").css("color","green");
      falg2=true;
    }
    btncheck()
  })
  //-----------------------------------------------
  //判断确认密码是否与确认密码一样
  $("#re").click(function () {
    var passwordOk = $("#pwdOk").val();
    var password = $("#pwd").val();
    if(password==passwordOk){

    }else{

      $("#sp4").html("密码不一致").css("color","red")
    }
    btncheck()
  })
  //---------------------------------------------
  //隐藏按钮
  function btncheck(){

    if (falg==true&&falg1==true&&falg2==true){
      $("#re").attr("disabled",false);
    }else{
      $("#re").attr("disabled",true);
    }
  }

  //--------------------------------------------------
  //取消重置事件
  $("#not").click(function (){
    location.reload();
  })

</script>
</body>
</html>
